<template>
 <div>
            <ProTable
                v-loading="loading"
                :data="tableData"
                :page="page"
                :column="column"
                :rowControl="[]"
                :elProps="{border:true}"
                :disabled="[]"
                :controlWidth="{}"
                @page-change="onPageChange"
                @pageRefresh="pageRefresh"
                >
                <template #search_operate>
                    <el-table-column  fixed="right" min-width="50px" >
                        <template #default="scope">
                            <div class="flex justify-around">
                              <div><el-link class="flex justify-center" type="primary" :underline="false" @click="handleSelect(scope.row,scope.$index, )" >延長</el-link ></div>
                              <div><el-link class="flex justify-center" type="primary" :underline="false" @click="handleRegister(scope.row,scope.$index, )" >套票報名</el-link ></div>
                            </div>
                        </template>
                    </el-table-column>
                </template>
                </ProTable>
                <delayed ref="delayedRef" @update="update"></delayed>
                <PackageUsage ref="PackageUsageRef" @update="update"></PackageUsage>
 </div>
</template>

<script setup>
import {ref,reactive,watch} from 'vue'
import {getTickets} from '@/http/index.js'
import delayed from './delayed.vue'
import PackageUsage from './PackageUsage.vue'
import { dayjs } from "element-plus";
import {message} from '@/common/function.js'
const column = {
  name:'套票名字',
  number:'發票編號',
  num:'數量',
  useNum:'已報名',
  create_time:'創建時間',
  hereto:'到期時間'
}
const props = defineProps({
    echo:Object
})
const page = reactive({page: 1,limit: 10,total: 0,page_size: [10, 20, 30]})
const loading = ref(true)
const tableData = ref([])
const form = reactive({
  student_id:''
})
watch(()=>props.echo,(newval)=>{
  form.student_id = newval.id
},{deep:true,immediate:true})

const init = async ()=>{
    loading.value = true
  let obj = Object.assign(form,page)
const data = await getTickets(obj)
if (data.code == 200) {
loading.value = false
page.total = data.data.total
tableData.value = data.data.data
//  tableData.value =  data.data.map(({details, number}) => details.map(item => ({number, ...item}))).flat()
}
}
const delayedRef = ref('')
const PackageUsageRef = ref('')
const handleSelect = (e)=>{
  console.log(e);
    delayedRef.value.init(e)
}
const notusedNumber = ref(0)
const ticketList = ref({})
const handleRegister = (e)=>{
    let determine = dayjs(dayjs(`${new Date()}`).format('YYYY-MM-DD hh:mm:ss')).isBefore(dayjs(e.hereto))
  if (determine) {
        e.course.map(v=>{
      v.invoice_id = e.id
      v.course_id = v.id
    })
  ticketList.value = e
  notusedNumber.value = e.num - e.useNum
  PackageUsageRef.value.init(ticketList.value,notusedNumber.value,form.student_id)
  }else{
    message('當前所使用套票已過期','warning')
  }
}

const onPageChange = async({ e, type })=>{
  console.log(e, type );
    if (type == "current") {
    page.page = e;
  }
  if (type == "size") {
    page.page = 1
    page.limit = e;
  }
 await init();
}
const pageRefresh = async ()=>{
  loading.value = true
  page.page = 1
  await init();
}
const update = ()=>{
    init();
}
defineExpose({
    init
})

</script>

<style scoped lang='less'>

</style>